Thinkphp MVC -> 控制器 视图 模型 -> FastAdmin -> 后台管理
Vue MVVM -> 视图 模型 视图模型 双向数据 -> UniApp 混合端
React V -> 视图 单向数据流  -> React Native 只做App
React Native 半源生 + 半React
京东小程序 -> Taro(Vue,React) H5 小程序 App ReactNative




组合：
后台管理：Vue/React(做后台页面显示) -> PHP(接口) -》 企业做项目

npm init react-app demo


Vue vue.config.js 配置文件 vite.config.js


安装构建工具，来对我们的脚手架进行拓展
npm install @craco/craco -S


react 数据指的就是 state 状态

修改状态：setState({})


类型限定
npm install prop-types -S


父子组件通信
父-子：用属性
子-父：用事件方法

8个 创建前后 挂载前后 更新前后 销毁前后

React 只是一个单一的视图层 view 

JSX：将JS 和 HTML 进行混合  javascript + xml xml==自定义标签结构
`${str}`

<React.Fragment> 或者 <>
都是短语标签

React == Vue (两种写法 选项式写法。组合式的写法)

React 类的方式写法
React 函数式的写法

React18

vue Typescript + vue3 + vite
v- 

react16 ~ 18
    react-native 混合 半源生 + 半react(源生JS)
    Typescript + react
    Flutter(门槛很高) App 混合 绝大部分都是源生(ios android) 少量的react-native 


angular8 9
ng-if ng-for


state == data 数据来源
ref == ref 获取源生DOM元素

useState 数据变化了 视图会重新渲染
useRef 变不变都不会重新渲染 
vue watch 监听 手动监听他 监听他有变化 就重新渲染
react useEffect(['demo','test'])

npm run start -> 运行在一个服务器 -> webpack-dev-server

Ref 本身是不可变的  所以我们不能够拿 ref.current 来作为 检测 变化的(useEffect) 依赖项 

vue -- data 双向绑定的响应式数据
vue -- computed 用于计算的数据
cookie 本地存储 vuex pinia 状态存储器

React -- state 状态
Redux ==  vuex 

count被改变了
total memoTotal 都会被重新执行

dep被改变了
total 重新执行

useMemo 主要是针对状态数据做缓存
useCallback 主要是针对函数做缓存

vue-cli@5.0.8 + vue-router@4
react@18.2.0 + react-router-dom@6

Vue、React 路由嵌套 === Thinkphp 模板布局
layout.html 
    {__CONTENT__} 

<router-link to="/test/params/title">


1期：12.12

中间相隔：2个星期

2期：

Typescript

js php 弱类型脚本语言


全局安装typescript
npm install -g typescript

查看typescript是否有安装
tsc --version

生成package.json的包管理文件
npm init

生成typescript的配置文件(tsconfig.json)
tsc --init

前端模块化
amd cmd commonjs -> nodejs
nodejs 
require
module.exports 

esmascript
import
export default

esm = export.default = {}
cjm = module.exports = {}

在大多数情况下
还是会将 esm 转换为 cjm 



创建typescript 脚手架
npx create-react-app hotel --template typescript

craco配置
yarn add @craco/craco -S

安装路由
yarn add react-router-dom -S


hotel_guest 客户信息表
    id
    busid
    nickname
    mobile
    sex 1,2

hotel_room 房间表
    name 房间名称
    thumb 缩略图
    price 价格
    flag (房间设施服务标签) fastadmin 系统配置
    content: 预订须知(正文描述内容)
    total: 房间数量
    deletetime: 软时间

hotel_order 订单表 - 评价字段
    id
    busid 用户外键
    roomid 房间外键
    oprice 原价
    price 实际支付的价格
    starttime 入住时间
    endtime 退房时间
    status 状态 1已支付 2已入住 3已退房 4已评价 -1申请退款 -2审核通过 -3审核不通过
    coupon_status 外键 (hotel_coupon_list外键 - 领取外键)
    comment 评价


hotel_collect 收藏表



coupon 优惠券

官方发放优惠券活动 表 hotel_coupon
    id
    title 活动标题
    thumb 活动缩略图
    createtime 活动时间
    endtime 活动结束时间
    rate 折扣率 0.5 小数
    total 数量
    status 状态 1 正在活动中 0 结束活动

优惠券的领取表 hotel_coupon_list
    id 
    cid 优惠券外键
    busid 用户外键
    createtime 领取时间
    status 状态 1 可以使用 0 不能使用(过期、已使用)


php think make:model common/Hotel/Guest

php think make:model common/Hotel/Room
php think make:model common/Hotel/Order
php think make:model common/Hotel/Coupon/Coupon
php think make:model common/Hotel/Coupon/Receive

    



